<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /*  let name  = "wang";
    let site = "wangyang.com";
    console.log(tag`姓名${name},网站${site}`)

    // function tag(strings){
    //   console.log(strings)
    // }

    // function tag(strings,name,site){
    //   console.log(name)
    //   console.log(strings)
    // }

    function tag(strings,...vars){
      console.log(vars)
      console.log(strings)// 字符串的数量大于变量的
    } */

      let lessons = [
        { title: "wangyang", author: "wangyang作者" },
        { title: "wangyang1", author: "wangyang作者1" },
        { title: "wangyang2", author: "wangyang作者2" }
      ];
      function template() {
        return `<ul>
          ${lessons.map(item => tag`<li>文章：${item.title}，作者：${item.author}</li>`).join("")}
        </ul>
      `;
      }
      function tag(strings,...vars){
        // console.log(strings)
        // console.log(vars)
        return strings.map((str,key)=>{
          return str+(vars[key] ? vars[key] : "")
        }).join("")
      }
      document.body.innerHTML += template();
    </script>
  </body>
</html>
